<template>
  <div id="register">
    <div class="registerConbox">
      <div class="registerBox">
        <p class="title">欣享医疗影像云平台</p>
        <el-card shadow="always" class="register-module">
          <div slot="header" class="clearfix formTitlt">
            <span>找回密码</span>
          </div>
          <el-form
            :model="registerForm"
            status-icon
            label-width="100px"
            class="demo-ruleForm"
            :rules="rules"
            ref="registerForm"
          >
            <el-form-item prop="phone">
              <el-input
                type="text"
                v-model="registerForm.phone"
                auto-complete="off"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="code">
              <div class="reg-code-wrapper">
                <el-input
                  type="text"
                  v-model="registerForm.code"
                  auto-complete="off"
                  class="reg-code"
                  placeholder="请输入验证码"
                />

                <el-button
                  v-if="!regCode.sendRegCodeDisable"
                  @click="sendRegCode()"
                  type="primary"
                  >获取验证码</el-button
                >
                <el-button
                  disabled
                  type="primary"
                  v-if="regCode.sendRegCodeDisable"
                  class="tip"
                  >{{ regCode.codeTime + "秒后再次获取" }}</el-button
                >
              </div>
            </el-form-item>
            <el-form-item prop="newPassword">
              <el-input
                type="password"
                v-model="registerForm.newPassword"
                auto-complete="off"
                placeholder="请输入新密码"
              />
            </el-form-item>

            <el-form-item>
              <el-button
                class="subBtn"
                type="primary"
                @click="submitForm('registerForm')"
                >修改密码</el-button
              >
            </el-form-item>
            <p class="smalltxt">
              <router-link class="a" to="/login">去登录</router-link>
            </p>
          </el-form>
        </el-card>
      </div>
    </div>
        <!-- <div class="Copyright">
    <p>Copyright © 2020 欣享医疗影像云</p>
  </div> -->
  
  </div>
</template>
<script>
import showDicom from "../../components/showDicom/showDicom_New"
import md5 from "js-md5"

export default {
  components: {
    showDicom
  },
  data () {
    return {
      registerForm: {
        phone: "",
        code: "",
        newPassword: ""
      },
      regCode: {
        sendRegCodeDisable: false,
        codeTime: 59
      },
      rules: {
        code: [
          {
            required: true,
            message: "验证码不能为空",
            trigger: "blur"
          }
        ],
        newPassword: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          }
        ]
      }
    }
  },
  methods: {
    submitForm (name) {
      this.$refs[name].validate(async (valid) => {
        if (!valid) {
          this.$message.error("请输入正确的手机号和验证码")
          return
        }

        const { code, phone, newPassword } = this.registerForm

        try {
          const result = await this.$request.resetPwd({
            code: Number(code),
            userName: phone,
            newPassword: md5(newPassword)
          })

          if (result.code === 200) {
            this.$message.success("密码更新成功")
            this.$router.push({
              path: "/login"
            })
            return
          }
          this.$message.error("密码更新失败" + result.msg)
        } catch (error) {
          console.log("error", error)
        }
      })
    },
    countDown () {
      this.regCode.sendRegCodeDisable = true
      let sendCode = setInterval(() => {
        if (this.regCode.codeTime-- <= 0) {
          this.regCode.codeTime = 59
          this.regCode.sendRegCodeDisable = false
          clearInterval(sendCode)
        }
      }, 1000)
    },

    async sendRegCode () {
      const phone = this.registerForm.phone.trim()
      const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/

      if (!phone || !reg.test(phone)) {
        this.$message.error("请您输入正确的手机号")
        return
      }

      this.countDown()
      try {
        await this.$request.forgotPassword({userName: Number(this.registerForm.phone)})
      } catch (error) {
        this.$message.error("验证码获取失败")
      }
    }
  }
}
</script>
<style lang="scss">
#register {
  width: 100%;
  height: 100%;
  background-color: #2d3a4b;
  .registerConbox {
    background: #2d3a4b;
  }

  .registerBox {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    .iconcolor {
      color: #409eff;
    }

    .el-card__header {
      border-bottom: 0px;
    }
    .title {
      font-size: 36px;
      font-weight: 600;
      color: #ffffff;
      margin-bottom: 20px;
    }
    .register-module {
      width: 380px;
      height: 430px;
      border: none;
      right: 0;

      .formTitlt {
        font-size: 18px;
        font-weight: 400;

        .titIconbox {
          float: right;

          .pointer {
            cursor: pointer;
          }
        }
      }

      .smalltxt {
        text-align: right;

        .a {
          text-decoration: none;
          color: #999999;
          font-size: 12px;
          margin-left: 8px;
        }
      }
    }

    .el-form-item__content {
      margin-left: 0px !important;

      .subBtn {
        width: 100%;
      }
    }

    .reg-code {
      width: 200px;
    }

    .reg-code-wrapper {
      display: flex;
      justify-content: space-between;
    }

    .tip {
      width: 135px;
    }

    .el-input__inner,
    .el-button,
    .el-card,
    .el-message {
      border-radius: 0px !important;
    }

    .el-form-item__content .ico {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 999;
      width: 40px;
      height: 39px;
      text-align: center;
      border-right: 1px solid #ccc;
    }

    .ewmbox {
      width: 100%;
      height: 240px;
      margin-top: -25px;

      .ewm {
        width: 140px;
        height: 140px;
        margin: 20px auto;

        p {
          font-size: 12px;
          padding-left: 40px;
          margin: 0;
        }
      }

      .ewmicon {
        width: 140px;
        margin: 20px auto 0;

        .iconfont {
          float: left;
        }

        p {
          font-size: 12px;
          padding-left: 40px;
          margin: 0;
        }
      }
    }
  }
}
.Copyright{
  width: 250px;
  margin: 0 auto;

  bottom:30px;
}
</style>
